<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片懒加载</title>
		<style type="text/css">
			html,body {
				width: 100%;
				height: 100%;
			}
			.container {
				width: 100%;
				height: 50%;
				overflow: auto;
			}
			.img {
				width: 100px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul id="list">
				<!-- 图片真实地址放在data-src中，src可默认显示占位图片 -->
				<li><img class="img" src="static/.9.png" data-src="static/1.jpg" alt="图片" /></li>
			</ul>
		</div>
		<script src="lazyImageXg.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				const ul = document.querySelector('#list');
				let lis = '';
				for (let i = 0; i < 20; i++){
					lis += `<li><img class="img" src="static/.9.png" data-src="static/1 (${i + 1}).jpg" alt="图片" /></li>`
				}
				ul.innerHTML = lis;
				
				// 函数调用
				const lazy = new LazyImage({
					container: '.container', // 绑定滚动事件的容器
					imgClass: '.img', // 需要显示的图片class名
					size: 5, // 每次加载图片数量
					distance: 100, // 距离未加载的图片多远时开始加载图片
					delay: 200, // 节流间隔，滚动时，多久执行一次懒加载事件
				});
				
			}
		</script>
	</body>
</html>
